<template>
	<div>
		<h2>订单详情</h2>
		<div v-if="order">
			<p>订单ID：{{ order.id }}</p>
			<p>订单名称：{{ order.name }}</p>
			<div class="detail-container">
				<section class="basic-info">
					<h3 class="info-title">订单信息</h3>
					<div class="info-grid">
						<div class="info-item">
							<label>订单ID：</label>
							<span>{{ order.id }}</span>
						</div>
						<div class="info-item">
							<label>订单名称：</label>
							<span>{{ order.name }}</span>
						</div>
					</div>
				</section>

				<section class="goods-section">
					<h3 class="section-title">商品明细</h3>
					<div class="goods-grid">
						<div v-for="(item, index) in order.items" :key="index" class="goods-card">
							<div class="goods-header">
								<span class="goods-index">#{{ index + 1 }}</span>
								<h4 class="goods-name">{{ item.name }}</h4>
							</div>
							<div class="goods-details">
								<div class="detail-item">
									<label>单价：</label>
									<span>¥{{ item.price }}</span>
								</div>
								<div class="detail-item">
									<label>数量：</label>
									<span>{{ item.quantity }}</span>
								</div>
								<div class="detail-item total">
									<label>小计：</label>
									<span>¥{{ item.price * item.quantity }}</span>
								</div>
							</div>
						</div>
					</div>
				</section>

				<section class="summary-section">
					<div class="total-amount">
						<label>订单总金额：</label>
						<span>¥{{ order.totalAmount }}</span>
					</div>
				</section>
			</div>
			<p>客户姓名：{{ order.customerName }}</p>
			<p>联系电话：{{ order.phoneNumber }}</p>
			<button @click="goBack">返回列表</button>
		</div>
		<div v-else>
			<p>订单不存在</p>
		</div>
	</div>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import { useRoute, useRouter } from 'vue-router'

	const route = useRoute()
	const router = useRouter()

	const orders = ref([{
			id: 1,
			name: '订单A',
			totalAmount: 299,
			customerName: '张三',
			phoneNumber: '138-1234-5678',
			items: [
				{ name: '商品A', price: 99, quantity: 2 },
				{ name: '商品B', price: 199, quantity: 1 }
			]
		},
		{
			id: 2,
			name: '订单B',
			totalAmount: 450,
			customerName: '李四',
			phoneNumber: '139-8765-4321',
			items: [
				{ name: '商品C', price: 150, quantity: 3 }
			]
		},
		{
			id: 3,
			name: '订单C',
			totalAmount: 680,
			customerName: '王五',
			phoneNumber: '137-5555-8888',
			items: [
				{ name: '商品D', price: 340, quantity: 2 }
			]
		},
	])

	const order = ref(null)

	watch(
		() => route.params.id,
		(newId) => {
			order.value = orders.value.find(o => o.id === Number(newId))
		}, { immediate: true }
	)

	const goBack = () => {
		router.push({ name: 'OrderList' })
	}
</script>

<style scoped>
	.detail-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 2rem;
	}

	/* 基础信息样式 */
	.basic-info {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid #eee;
	}

	.info-title {
		color: #333;
		font-size: 1.1rem;
		margin-bottom: 1.2rem;
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
	}

	.info-item {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.info-item label {
		color: #666;
		min-width: 70px;
	}

	/* 商品卡片样式 */
	.goods-section {
		margin: 2rem 0;
	}

	.section-title {
		color: #333;
		font-size: 1.1rem;
		margin-bottom: 1.5rem;
	}

	.goods-grid {
		display: grid;
		gap: 1.2rem;
	}

	.goods-card {
		background: #fff;
		border: 1px solid #eee;
		border-radius: 8px;
		padding: 1.5rem;
		transition: box-shadow 0.2s;
	}

	.goods-card:hover {
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}

	.goods-header {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.goods-index {
		color: #42b983;
		font-weight: 500;
	}

	.goods-details {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.detail-item {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.detail-item label {
		color: #666;
	}

	.detail-item.total {
		color: #42b983;
		font-weight: 500;
	}

	/* 汇总样式 */
	.summary-section {
		margin-top: 2rem;
		padding-top: 1.5rem;
		border-top: 1px solid #eee;
	}

	.total-amount {
		display: flex;
		align-items: center;
		gap: 1rem;
		font-size: 1.1rem;
	}

	.total-amount label {
		color: #333;
		font-weight: 500;
	}

	button {
		padding: 10px 24px;
		margin-top: 2rem;
		background-color: #42b983;
		color: white;
		border: none;
		border-radius: 6px;
		font-weight: 500;
		transition: background-color 0.2s;
	}

	button:hover {
		background-color: #3aa876;
	}
</style>